Debugging study progress and word order in React Native
In this post, I will focus on one of challenges during K-PopRama Slang development: making sure the study screen maintains the correct word order and progress across different situations. The Study screen has two modes: Daily Picks and Random Study . Users can mark a word as correct or wrong, reset their session, switch modes, and leave the app before returning later. At first glance, managing the word order seems simple. However, the logic becomes more complicated when the app must also save progress, restore it after restarting, and reset the session when the daily word list changes. I found that the best way to investigate the behavior was to trace the state changes and useEffect execution step by step instead of looking at each function in isolation. How the study screen works The Study screen displays one word at a time from an array called studyWords . The currently displayed word is determined by currentIndex . For example, imagine that the study list contains five words: [A, ...
